import React from "react";
import Nav from "../Components/Nav";
import CarouselProduct from "../Components/CarouselProduct";
import DeskTop from "../Components/DeskTop";
import Footer from "../Components/Footer";
import product from "../statics/images/product/product.jpeg";
import "./index.less";

export default function DiscoverMore() {
  return (
    <div className="discoverMore">
      <Nav />
      <CarouselProduct title="Wastemaster" isOnly />
      <DeskTop />
      <div className="component">
        <div className="container">
          <div className="left">Backhoe Loaders</div>
          <div className="right">
            <p>
              JCB knows a thing or two about designing the perfect backhoe
              loader. We were, after all, the first company who developed the
              concept back in 1953. And we’ve stayed first pretty much ever
              since: today we’re the world’s number one backhoe loader
              manufacturer by quite some way (almost half of all backhoe loaders
              are JCB ones).
            </p>
            <p>
              Our range-topping JCB 3CX Eco and JCB 4CX Eco, are quite simply
              the world’s most efficient backhoe loaders for typical duty
              cycles. Innovative hydraluic systems provide fuel saving with our
              EcoDig, EcoLoad and EcoRoad systems are designed to save you even
              more.
            </p>
          </div>
        </div>
      </div>
      <div className="products">
        {[0, 1, 2, 3].map((item) => {
          return (
            <div className="productItem">
              <div className="row">
                <img src={product} />
                <div className="col">
                  <div className="content">
                    <h2 className="title">530-70</h2>
                    <p className="description">
                      The JCB 530-70 Telescopic Handler is a versatile and
                      durable machine, designed to move any material quickly and
                      safely.
                    </p>
                  </div>
                  <ul>
                    {["Brochure Download", "Request Price ", "View more"].map(
                      (item) => (
                        <li>{item}</li>
                      )
                    )}
                  </ul>
                </div>
              </div>
              <div className="row feature">
                {[
                  { title: "Max Lift Capacity", feature: "3,000 kg" },
                  {
                    title: "Lift Capacity at Full Height",
                    feature: "2,500 kg",
                  },
                  {
                    title: "Lift Capacity at Full Reach",
                    feature: "1,250 kg ",
                  },
                  {
                    title: "Max Lift Height",
                    feature: "7 m",
                  },
                  {
                    title: "Max Engine Power",
                    feature: "56 kW ",
                  },
                  {
                    title: "Max Speed",
                    feature: "30 kph ",
                  },
                ].map((v) => {
                  const { title, feature, weight } = v;

                  return (
                    <div className="col">
                      {title && <div className="title">{title}</div>}
                      {feature && <div className="featureItem">{feature}</div>}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
      <Footer />
    </div>
  );
}
